昨天寫到最後才發現，

我一直以為：

justify-content = 左右
align-items = 上下

結果一加上：

flex-direction: column;

整個方向直接變了。

我：？？？？？？？

所以今天就來搞懂昨天留下來的問題：
主軸到底是誰？交叉軸又是哪位？

其實先看 flex-direction 就好
Flexbox 預設是 CSS：

flex-direction: row;

這時候元素會從左到右排列：

[1] [2] [3]

所以：

主軸 = 左右
交叉軸 = 上下

這時 CSS：

justify-content: center;

就是沿著主軸移動，也就是左右置中。

而 CSS：

align-items: center;

就是沿著交叉軸移動，也就是上下置中。

喔～

原來昨天沒有記錯一半。
只是我只記了一半 XD

那 column 呢？

如果改成 CSS：

flex-direction: column;

元素就會變成：

[1]
[2]
[3]

這時候：

主軸 = 上下
交叉軸 = 左右

所以 CSS：

justify-content

就變成控制上下。

而 CSS :

align-items

就變成控制左右。

原來不是它們兩個突然換班。
是整條路自己轉方向了 XD

今天只要記這句
以後不要再死背：

justify = 左右
align = 上下

改成記：

justify-content → 跟著主軸走

align-items → 跟著交叉軸走

至於主軸是哪個方向？

先看 CSS：

flex-direction

就對了!

昨天還覺得 Flexbox 在考方向感，
今天總算有稍微找回東南西北了 XD

Day 5，完成！